// eslint-disable-next-line import/no-unresolved
import React, {Component} from 'react';
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import Debounce from "lodash.debounce";
import {addResizeHook, removeHook} from "@/utils/resize";


class BellowLocation extends Component {


  state = {
    data: [],
    chart: null,
    option: {
      title: {
        text: '风箱温度'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
        }
      },
      grid: {
        right: '3%',
      },
      toolbox: {
        show: false,
        x: '85%',
        y: '8%',
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          saveAsImage: {show: true}
        }
      },
      legend: {

        y: '10%',
        data: ['柱状', '折线']
      },
      xAxis: [
        {
          type: 'category',
          position : 'bottom',
          data: [3.64, 7.28, 10.92, 18.20, 25.48, 32.76, 40.04, 47.32, 54.60,
            58.24, 65.52, 72.80, 74.44, 80.08],
          axisPointer: {
            type: 'shadow'
          },
          // axisLabel: {
          //   rotate: 30
          // }
        },
        {
          type: 'category',
          position : 'bottom',
          axisPointer: {
            type: 'shadow'
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 600,
          interval: 100,
          axisLabel: {
            formatter: '{value} ℃'
          }
        },
      ],
      series: [
        {
          name: '柱状',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          itemStyle: {
            normal: {
              label: {
                show: true,  //开启显示
                position: 'top',  //在上方显示
                textStyle: {  //数值样式
                  color: 'black',
                  fontSize: 10
                }
              }
            }
          },
        },
        {
          name: '折线',
          type: 'line',
          yAxisIndex: 0,
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        }
      ]
    }
  };

// 设置图表自适应钩子,100ms的过渡延迟
  resize = Debounce(() => {
    this.state.chart.resize()
  }, 100);



  componentDidMount() {
    const {chartId} = this.props;
    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById(chartId));
    // 绘制图表

    this.state.chart.setOption(this.state.option);

    addResizeHook(this,this.state.chart.resize)

  }


  shouldComponentUpdate() {
    return false
  }

  componentWillUnmount() {
    removeHook(this)
  }

  // 监听父组件更改的数据
  static getDerivedStateFromProps(nextProps, prevState) {
    const {data} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (data && data !== prevState.data) {
      const {series, xAxis} = prevState.option;
      xAxis[1].data = [];
      series[0].data = [];
      series[1].data = [];
      if (data.bellow_locations !== undefined & data.bellow_locations !== null) {
        data.bellow_locations.forEach(item => {
          xAxis[1].data.push(`\n\n${item.index}号`);
          series[0].data.push(item.temp);
          series[1].data.push(item.temp);
        });
      }

      if (prevState.chart !== null) {
        prevState.chart.setOption(prevState.option,true)
      }

      return {
        data,
      };
    }
    // 否则，对于state不进行任何操作
    return null;
  }


  render() {
    const {
      chartId,
      width = 100,
      height = 300
    } = this.props;

    return (
      <div id={chartId} style={{width: `${width}%`, height}}/>
    )
  }
}

export default BellowLocation
